<template>
  <div>
    <div class="table">
      <el-table
          border
          show-header
          stripe
          size="mini"
          :data="list"
          highlight-current-row
          :row-class-name="rowClassName">
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.size + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remarks" label="课程描述" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status" label="课程状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope" >
            <span>{{['结束', '进行中', '中止'][scope.row.status]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="person" label="提交人员" align="center" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-row type="flex" justify="end" v-show="pageInfo.total>0">
        <el-pagination
            class="pageBar"
            :style="{float: 'right', padding: '20px'}"
            background
            @size-change="sizeChangeFn"
            @current-change="currentChangeFn"
            :current-page="pageInfo.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
      </el-row>
    </div>
  </div>

</template>

<script>
  import tableSetting from "../../../util/tableSetting";
  export default {
    name: "tableList",
    mixins: [tableSetting],
    props: {
      list: {
        type: Array,
        default: () => []
      },
      pageInfo: {
        type: Object,
        default: {
          current: 1,
          size: 10,
          total: 0
        }
      },
    },
    data () {
      return {
      }
    },
    watch: {
      list () {

      }
    }
  }
</script>

<style scoped>

</style>
